{% extends 'media-manage/layout.html.twig' %}

{% block title %}
  {{'course.course_files.subtitle_manage.content_title'|trans}}
{% endblock %}

{% do script([cloud_sdk_url('uploader'), 'app/js/media-manage/index.js']) %}

{% block media_edit %}
<div class="manage-edit-body">
  <ul class="nav nav-tabs nav-tabs-edit" role="tablist">
    <li role="presentation" class="active">
      <a href="#practice" aria-controls="practice" role="tab" data-toggle="tab">{{'course.course_files.subtitle_manage.subtitle'|trans}}</a>
    </li>
  </ul>
  <a href="{{ path('media_subtitle_preview', {mediaId:media.id}) }}" class="btn btn-info btn-preview" target="_blank">
    {{'course.course_files.subtitle_manage.preview_btn'|trans}}
  </a>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active pane-question">
    <div>
      <div class="text-track-title plm">
        <div class="row clearfix">
          {% set token = uploader_token('subtitle', media.id, 'private') %}
          <div class="caption-uploader js-select-file pull-left" id="uploader" style="width: 130px;{% if subtitles|length > 3 %}display: none;{% endif %}" data-media-id="{{ media.id }}" data-media-global-id="{{ media.globalId }}" data-subtitle-create-url="{{ url('media_subtitle_create', {mediaId: media.id}) }}" data-subtitle-list-url="{{ url('media_subtitle_list', {mediaId: media.id}) }}" data-init-url="{{ url('uploader_init', {token:token}) }}" data-finish-url="{{ url('uploader_finished', {token:token}) }}">
          </div>
          <div class="caption-notify pull-left" style="width: 270px; padding-left: 0">
            {{'course.course_files.subtitle_manage.add_tips'|trans}}
          </div>
        </div>
      </div>
      <div class="text-track-list mrm mts ptm">
        <div class="mrm" id="track-select" data-subtitle-list="{{ subtitles|json_encode() }}"></div>
        <div class="text-track-overview mrm"></div>
      </div>
    </div>
  </div>
</div>
</div>
{% endblock %}
